<template>
  <div class="bgimg">
    <img
      src="https://www.pohome.cn/image/carousel/blog.jpg"
      alt=""
    >
  </div>

  <!-- 爱心活动 B -->
  <div class="news">
    <div class="card">
      <div class="img">
        <img
          src="https://www.pohome.cn/upload/img/blog/feature/1387.jpeg"
          alt=""
        >
      </div>
      <div class="card-body">
        <div class="card-t">看看汪汪喵呜领养中心的春天可以多么美好！</div>
        <div class="card-p">2024年3月-4月，北京的春天很短，但美！每年的3、4月总是领养中心很美好的时间，一派春机盎然，杏花粉，桃花红，草绿了，狗狗们都喜欢躺平懒洋洋的晒太阳。真希望，美丽的领养中心可以给这些被救助的小毛球们提供良好的生活环境，让进入领养中心的所有人对流浪动物救助工作有一个全新的认识！关爱流浪动物，拯救生命这件事，也可以很美好。一起努力！</div>
      </div>
    </div>
    <div class="card">
      <div class="img">
        <img
          src="https://www.pohome.cn/upload/img/blog/feature/1386.jpeg"
          alt=""
        >
      </div>
      <div class="card-body">
        <div class="card-t">带着狗狗去踏青 | 付出的爱定会开出善良之花</div>
        <div class="card-p">清明假期，我们受邀参加鸭马路组织的踏青会，志愿者带着“开心”“大灰灰”和“咖啡”三个大号毛球以及汪喵周边义卖品、宣传品一起去HAPPY啦！ 认识了很多新朋友，也给领养中心的小可爱们狠狠的推了一波领养宣传。短暂的活动结束了，但大家都说，今年要带更多的小狗出去见世面，让我们一起露营吧~ 志愿者说：”养宠之前请想一想，无论生老病死，疾病与贫穷，幸运与快乐，你都愿意不离不弃，与它相伴一生吗？如果答案是“YES"，来领养一个它吧！“</div>
      </div>
    </div>
    <div class="card">
      <div class="img">
        <img
          src="https://www.pohome.cn/upload/img/blog/feature/1383.jpeg"
          alt=""
        >
      </div>
      <div class="card-body">
        <div class="card-t">清明假期带着汪汪去踏春~鸭先知 · 踏春会</div>
        <div class="card-p">4月4日-5日，大家来“鸭马路”跟汪喵一起踏青呀~ 本次踏青会有市集（对，我们的汪喵杂货铺又要上线了）、有演出、有咖啡、有机车、还有狗狗们。这次活动我们计划带上领养中心的萨摩耶“开心”、巨贵“大灰灰”和社牛姐“咖啡”一起出游，飞行嘉宾可能会是瀛笑笑同学。领养中心好多狗狗都老了，它们需要多出来走走，长长见识，所有，今年只要有时间且场地是宠物友好的，我们就希望能分批带它们出来玩，欢迎大家多多支持。</div>
      </div>
    </div>
    <div class="card">
      <div class="img">
        <img
          src="https://www.pohome.cn/upload/img/blog/feature/1385.jpeg"
          alt=""
        >
      </div>
      <div class="card-body">
        <div class="card-t">2024年2月捐助明细</div>
        <div class="card-p">此捐助明细数据来自汪汪喵呜孤儿院的淘宝公益店铺、微店、公共捐款账号、领养中心现场捐助以及朋友圈红包捐助，如有遗漏，请及时留言联系。明细中不包含在上海联劝公益基金会监督管理之下的众筹项目明细（如：腾讯公益平台、帮帮网平台等），众筹明细可在各平台查询。欢迎监督，谢谢！</div>
      </div>
    </div>
  </div>
  <!-- 爱心活动 E -->
</template>
<style scoped>
/* 爱心活动 B */
.news {
  width: 100%;
  padding: 10px 15%;
  background-color: #ededed93;
  padding-bottom: 160px;
}

.news .t {
  width: 100%;
  font-size: 1.5rem;
  color: var(--myc);
  border-bottom: 2px solid var(--myc);
}
.news .card {
  margin-top: 10px;
  padding: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #fff;
}
.news .card .img {
  width: 30%;
}
.news .card .img img {
  width: 100%;
}
.news .card-body {
  width: 70%;
  padding: 0 20px;
}
.news .card-body .card-t {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: center;
}
.news .card-body .card-p {
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .news {
    padding: 15px;
    padding-bottom: 150px;
  }
}
@media (max-width: 700px) {
  .news .card .img {
    width: 100%;
    text-align: center;
  }
  .news .card-body {
    width: 100%;
  }
}
/* 爱心活动 E */
</style>